<template>
    <div class="commentTwo">
        <div v-for="(item,index) in commentTwoData" :key="index">
            <div class="commentOne">
                <div class="img_p">
                    <img v-if="item.userinfo.user_img!=null" :src="item.userinfo.user_img" alt="">
                    <img v-else src="~assets/img/default_img.jpg" alt="">
                    <p>
                        <span>{{item.userinfo.name}}</span>
                        <span>{{item.comment_date}}</span>
                    </p>
                </div>
                <div class="contentName">
                    <div class="contentText">
                        <div v-if="!temp">{{item.comment_content}}<span @click="postComments(item.comment_id)" class="huifu2" >回复</span></div>
                        <div v-else><span style="color: #fb7299">回复 {{item.parent_user_info.name}}:</span>{{item.comment_content}}<span @click="postComments(item.comment_id)" class="huifu2">回复</span> </div>
                    </div>
                </div>
                <comment-two @postCommentMore="postCommentMore"  :commentTwoData="item.child" :temp="true"></comment-two>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "commentTwo",
        props:['commentTwoData','temp'],
        methods:{
            postComments(id){
                this.$emit('postCommentMore',id)
                this.$emit('postCommentMoreBack',id)
            },
            postCommentMore(id){
                this.postComments(id)
                this.$emit('postCommentMoreBack',id)
            }
        }
    }
</script>

<style scoped lang="less">
    .commentTwo{
        .commentOne{
            margin: 6.452vw 0;
            display: flex;
            flex-direction: column;
            .img_p{
                display: flex;
                img{
                    margin-right: 3.226vw;
                    margin-bottom: 2.581vw;
                }
                p{
                    flex: 1;
                    margin: 0;
                    align-items: flex-start;
                    font-size: 4.516vw;
                    color: #757575;
                    display: flex;
                    justify-content: space-between;
                }
            }
            .contentName{
                margin-left: 11.29vw;
                margin-top: -4.839vw;

            }
        }

    }

</style>